<template>
  <div>
    <el-container>
      <el-asid class="el-asid">
        <div style="height: 70px;color:#fff; display:flex; align-items:center;justify-content:center">
          <span>北京114医生端</span>
        </div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#393d49"
            class="el-menu-vertical-demo"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :default-active="$route.path"
            router
        >
          <el-menu-item index="/doctor/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-sub-menu index="">
            <template #title>
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>排班信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/doctor/myscheduling">我的排班</el-menu-item>
              <el-menu-item index="/doctor/diagnosis">开始诊断</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>个人信息</span>
          </el-menu-item>
          <el-menu-item index="/doctor/DiscontinuationView">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>申请停诊</span>
          </el-menu-item>
          <el-menu-item index="">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>查看公告</span>
          </el-menu-item>
        </el-menu>
      </el-asid>

      <!-- 右边区域 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div style=" display:flex; align-items:center;width:500px ;height:60px; float: left">
            <span style=" float :left ;">
              <i class="el-icon-s-fold" style=" font-size: 25px; padding-right: 20px"></i>
            </span>
            <img :src="clinic.hospital.icon" width="50">
            <span style="font-size: 18px">{{clinic.hospital.name}} </span>
            <el-icon><ArrowRight /></el-icon>
            <span style="float:right">{{clinic.name}}</span>
          </div>
          <div style="float: right ; height:60px; display: flex; align-items: center ">
            <img :src="user.icon == null || user.icon == '' ? 'https://tse1-mm.cn.bing.net/th/id/OIP-C.OfF_KChm9LNNYU_jFqVoBwAAAA?o=7&cb=thvnextc2rm=3&rs=1&pid=ImgDetMain' : user.icon"
                 width="40" height="40" style="border-radius: 50px;border: 1px solid #cdd1d5;margin-right: 10px">
            <el-dropdown>
              <span class="el-dropdown-link">
                 {{user.name}}
                  <el-icon class="el-icon--right">
                    <arrow-down/>
                 </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 内容区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
//elementPlus组件内容
import {ArrowDown} from '@element-plus/icons-vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const user = ref({})
const clinic = ref({hospital:{}})
onMounted(()=>{
  user.value = JSON.parse(sessionStorage.getItem("user"))
  initClinic()
})
const initClinic = ()=>{
  axios.get('/clinic/getClinicById',{params:{id : user.value.cid}}).then(res=>{
    if (res.data.code == 200){
      clinic.value = res.data.data
    }else {
      ElMessage.error(res.data.msg)
    }
  })
}
const logout = ()=>{
  sessionStorage.removeItem("token")
  sessionStorage.removeItem("user")
  ElMessage.success("退出成功")
  router.push({
    path:'/login'
  })
}
//==================================================
</script>

<style scoped>
.el-asid {
  width: 180px;
  transition: all 2s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  min-height: 900px;
  background-color: #393d49;
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}

.el-main {
  padding: 10px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-dropdown{
  cursor: pointer;
}
</style>
